<template>
  <div class="cutTitle">
      <span @click="cut(0)" :class="{active: index == 0}">商品介绍</span>
      <span @click="cut(1)" :class="{active: index == 1}">商品评价</span>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
 setup(props,{emit}){
   const index = ref(0);
   const cut = (i) => {
      index.value = i;
      emit('cut',i);
   }
   return{
     index,
     cut
   }
 }
 
};
</script>

<style lang='scss' scoped>
.cutTitle{
  height: 90px;
  display: flex;
  background: #fff;
  margin-top: 20px;
}
span{
    width: 50%;
    text-align: center;
    font-size: 32px;
    line-height: 90px;
}
.active{
  border-bottom: 4px solid red;
}
</style>
